<template>
    <view class="container">
        <view class="flex justify-center mt-220 fs-38 fw-600">请输入手机号码</view>
        <view class="flex justify-center fs-22 mt-25 c-888888">为确保帐户安全，绑定手机号前，需进行身份校验</view>
        <view class="container__inputs px-20 py-30">
            <uv-form>
                <uv-form-item>
                    <uv-input border="bottom" placeholder="请输入手机号"
                        :customStyle='{background:"#fff",borderRadius:"10rpx",padding:"15rpx 25rpx"}'>
                        <template v-slot:prefix>
                            <view class="container__inputs-label pr-20 c-000000 fs-28">手机号</view>
                        </template>
                        <template v-slot:suffix>
                            <view class="fs-24" style="color:#9186e7">使用微信手机号</view>
                        </template>
                    </uv-input>
                </uv-form-item>
                <uv-form-item>
                    <uv-input border="bottom" placeholder="请输入6位验证码"
                        :customStyle='{background:"#fff",borderRadius:"10rpx",padding:"15rpx 25rpx"}'>
                        <template v-slot:prefix>
                            <view class="container__inputs-label pr-20 c-000000 fs-28">验证码</view>
                        </template>
                        <template v-slot:suffix>
                            <uv-button size="mini" :customStyle="{background:'#dbddf6',border:'none',color:'#958ce7'}"
                                :text="tips" type="success" @click="getCode"></uv-button>
                            <uv-code seconds="20" changeText="x秒重新获取" ref="uCode" @change="codeChange"></uv-code>
                        </template>
                    </uv-input>
                </uv-form-item>
            </uv-form>
        </view>
        <view class="container__btn px-20 pt-20">
            <uv-button text="绑定" size="large" color="#7f72e4" :customStyle="{borderRadius:'20rpx'}"></uv-button>
        </view>
    </view>
</template>
<script setup lang="ts">
    import {
        onMounted,
        ref
    } from "vue";
    import MyButton from "@/components/Button.vue";
    const type = ref('register');
    let tips = ref('');
    const uCode = ref(null);
    const popup = ref('');
    const getCode = () => {
        uCode.value.start();
    };

    const codeChange = (text) => {
        tips.value = text;
    };
</script>
<style scoped lang="scss"></style>